<template>
  <div class="tab-bar">
    <div 
      class="tab-item" 
      :class="{ active: activeTab === 'pending' }"
      @click="$emit('tabChange', 'pending')"
    >
      待接单
    </div>
    <div 
      class="tab-item" 
      :class="{ active: activeTab === 'processing' }"
      @click="$emit('tabChange', 'processing')"
    >
      处理中
    </div>
    <div 
      class="tab-item" 
      :class="{ active: activeTab === 'completed' }"
      @click="$emit('tabChange', 'completed')"
    >
      已完成
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  activeTab: string
}>()

defineEmits<{
  tabChange: [tab: string]
}>()
</script>

<style scoped>
.tab-bar {
  display: flex;
  background: white;
  margin: 0 16px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tab-item {
  flex: 1;
  padding: 12px;
  text-align: center;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s;
}

.tab-item.active {
  background: #409eff;
  color: white;
}
</style>